import { BasicTable, useTable, FormSchema, BasicColumn } from "@/components/Table";
import data from "./data.json";
import { useTranslation } from "react-i18next";
import { BasicForm, useForm } from "@/components/Form";
import { filterData } from "@/utils/util";
import { useEffect, useState } from "react";
import { DICT_TYPE, getDictOptions } from "@/utils/dict";

const UseHooks = () => {
	const { t } = useTranslation();
	const formSchema: FormSchema[] = [
		{
			label: "From Date",
			field: "fromDate",
			component: "DatePicker",
			colProps: {
				span: 6
			}
		},
		{
			label: "To Date",
			field: "toDate",
			component: "DatePicker",
			colProps: {
				span: 6
			}
		},
		{
			label: "Patient ID",
			field: "patientId",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Full name",
			field: "patient_name",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Year of birth",
			field: "date_of_birth",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Age",
			field: "age",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Gender",
			field: "gender",
			component: "Select",
			componentProps: {
				options: getDictOptions(DICT_TYPE.GENDER_TYPE)
			},
			colProps: {
				span: 6
			}
		},
		{
			label: "House number",
			field: "phone_number",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Village/Street",
			field: "address",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Occupation",
			field: "Occupation",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Province/City",
			field: "City",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "District",
			field: "District",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Ward/Commune",
			field: "Commune",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Ethnicity",
			field: "Ethnicity",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Beneficiary",
			field: "Beneficiary",
			component: "Input",
			colProps: {
				span: 6
			}
		},
		{
			label: "Card Number",
			field: "cardNumber",
			component: "Input",
			colProps: {
				span: 6
			}
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("From Date"),
			dataIndex: "fromDate"
		},
		{
			title: t("To Date"),
			dataIndex: "toDate"
		},
		{
			title: t("Patient ID"),
			dataIndex: "patientId"
		},
		{
			title: t("Full name"),
			dataIndex: "patient_name"
		},
		{
			title: t("Year of birth"),
			dataIndex: "date_of_birth"
		},
		{
			title: t("Age"),
			dataIndex: "age"
		},
		{
			title: t("Gender"),
			dataIndex: "gender"
		},
		{
			title: t("House number"),
			dataIndex: "phone_number" // 如果这确实是电话号码，则保持不变；如果不是，请调整为正确的字段名。
		},
		{
			title: t("Village/Street"),
			dataIndex: "address"
		},
		{
			title: t("Occupation"),
			dataIndex: "Occupation"
		},
		{
			title: t("Province/City"),
			dataIndex: "City"
		},
		{
			title: t("District"),
			dataIndex: "District"
		},
		{
			title: t("Ward/Commune"),
			dataIndex: "Commune"
		},
		{
			title: t("Ethnicity"),
			dataIndex: "Ethnicity"
		},
		{
			title: t("Beneficiary"),
			dataIndex: "Beneficiary"
		},
		{
			title: t("Card Number"),
			dataIndex: "cardNumber"
		}
	];
	const [tableData, setTableData] = useState([]);
	const [registerTable] = useTable({
		dataSource: tableData,
		columns,
		useSearchForm: false
	});

	const [register, { validateFields }] = useForm({
		schemas: formSchema,
		labelWidth: 100,
		showActionButtonGroup: true,
		actionColOptions: { span: 24 }
	});
	/** Function */
	const resetFn = () => {
		setTableData(data);
	};
	const timeFn = (tiem: string) => {
		if (!tiem) return;
		const [date] = tiem.split(" ");
		return date;
	};
	const selectFn = async () => {
		const formValue = await validateFields();
		formValue.tu_ngay = timeFn(formValue.tu_ngay);
		formValue.den = timeFn(formValue.den);
		const arr = filterData(data, formValue);
		console.log(arr);
		setTableData(arr);
	};
	useEffect(() => {
		setTableData(data);
	}, []);
	/** Request */

	return (
		<div className="generalHealthCheckUpStatistics">
			<div className="page-content">
				<div className="block">
					<BasicForm register={register} submit={selectFn} reset={resetFn}></BasicForm>
				</div>
				<div className="mt-2">
					<BasicTable register={registerTable}></BasicTable>
				</div>
			</div>
		</div>
	);
};

export default UseHooks;
